<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="importmap">
      {
        "imports": {
          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for"
        }
      }
    </script>
    <script type="module">
      import { waitFor } from '@testduet/wait-for';

      run(async function () {
        const {
          WebChat: { renderWebChat, testIds }
        } = window; // Imports in UMD fashion.

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        renderWebChat(
          {
            directLine,
            store,
            styleOptions: {
              feedbackActionsPlacement: 'activity-actions'
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          type: 'message',
          id: 'a-00000',
          timestamp: 0,
          text: 'This is a test message to show feedback buttons',
          from: {
            role: 'bot'
          },
          locale: 'en-US',
          entities: [],
          channelData: {
            feedbackLoop: {
              type: 'default',
              disclaimer: 'This is a test disclaimer message'
            }
          }
        });

        await pageConditions.numActivitiesShown(1);

        pageElements.byTestId('send box text area').focus();
        await host.sendShiftTab(3);

        await host.sendKeys('ENTER');
        await host.sendKeys('SPACE');

        await host.snapshot('local');

        // WHEN: Like button is dismissed by tapping on it again.
        await host.sendKeys('ESCAPE');

        // THEN: Should focus on the like button.
        await waitFor(() => expect(document.activeElement).toBe(pageElements.allByTestId('feedback button')[0]));

        // WHEN: Like button is tapped again.
        await host.sendKeys('SPACE');

        await pageConditions.became(
          'feedback form is open',
          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
          1000
        );

        // Validate aria labelledby is present for feedback form and matching elements are present
        const feedbackFormSendBox = pageElements.byTestId('feedback sendbox');
        const ariaLabelledBy = feedbackFormSendBox.getAttribute('aria-labelledby');
        expect(ariaLabelledBy).toContain('feedback-form__form-header__id');
        const ariaDescribedBy = feedbackFormSendBox.getAttribute('aria-describedby');
        expect(ariaDescribedBy).toContain('feedback-form__form-footer__id');
        await pageObjects.verifyDOMIntegrity();

        // WHEN: The cancel button is clicked.
        await host.sendTab(2);
        await host.sendKeys('ENTER');

        // WHEN: Should focus on the Like button as it was the action that just cancelled.
        expect(document.activeElement).toEqual(
          document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)[0]
        );

        // THEN: Should match snapshot.
        await host.snapshot('local');

        // WHEN: Press right arrow key to select the dislike button (radio button).
        await host.sendKeys('RIGHT');

        await pageConditions.became(
          'feedback form is open',
          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
          1000
        );

        await host.sendKeys('Test feedback');

        await host.snapshot('local');

        const { activity } = await directLine.actPostActivity(async () => {
          await host.sendTab(1);
          await host.sendKeys('ENTER');
        });

        expect(activity).toEqual(
          expect.objectContaining({
            type: 'invoke',
            name: 'message/submitAction',
            value: {
              actionName: 'feedback',
              actionValue: {
                reaction: 'dislike',
                feedback: {
                  feedbackText: 'Test feedback'
                }
              }
            }
          })
        );

        await host.snapshot('local');
      });
    </script>
  </body>
</html>
